<template>
  <div class="detail-info">
    <div class="detail-swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="url in detail.photo" :key="url.id">
          <img :src="url.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <p class="detail-title">{{detail.title}}</p>
    <div class="detail-price">
      <div>
        <span>￥ <b>{{detail.price}}</b></span>
        <span style="margin-left: 10px;"><s>原价￥ {{detail.originPrice}}</s></span>
      </div>
      <span>销量 <b>{{detail.saleNum}}</b></span>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon to="/cart" icon="cart-o" text="购物车" badge="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCart({ detail })"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      id: '',
      detail: {}
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getDetail(this.id).then(resp => {
      const {
        id,
        title,
        type,
        photo,
        price,
        saleNum,
        originPrice,
        descContentList
      } = resp.detail
      this.detail = {
        id,
        title,
        type,
        photo,
        price,
        saleNum,
        originPrice,
        descContentList
      }
    })
  },
  methods: {
    ...mapMutations(['addToCart'])
  }
}
</script>

<style lang="scss" scoped>
.detail-info{
  padding: 5px;
  line-height: 2;
  color: #8395a7;
}
.detail-swiper{
  width: 100%;
  img{
    width: 100%;
    height: auto;
  }
}
.detail-title{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.detail-price{
  display: flex;
  justify-content: space-between;
  b{
    color: red;
  }
}
</style>
